iT邦幫忙

2022 iThome 鐵人賽

DAY 28
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 28

Flutter Developer Learning SwiftUI. @State var lesson28 = "多平台"

  • 分享至 

  • xImage
  •  

Today Preview

1. 正文

今天的重點就是如何讓SwiftUI變成Mac app
只要你的Mac是M1,就可以看到裝置列表裡面有Mac

然後就可以run在Mac上了

打完收工XD
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
沒啦XD

多平台,也要多圖片XD

接下來會嘗試讓原本是iOS SwiftUI的專案可以另外加上其他平台
官方示意圖如下

A-0.

先提醒各位
在專案頁這邊會有個Mac的checkbox可以勾
但不是這邊
這是一個叫做Mac Catalyst
有興趣的同學可以研究一下
跟今天要提的內容無關

A-1.

先增加一個Target
選擇macOS App

A-2.

因為是既有專案
原有的Target會跟專案名稱一樣
所以Produce Name(Target Name)要另外想個名字
不然會報錯重名

A-3.

接下來就是選擇以前寫的檔案,加入新的Mac Target
可以用shift鍵多選(folder扣掉要反選)
然後在右側欄選擇第一個tab(File inspector)
在Target Membership打勾

A-4.

恭喜你,瘋狂噴錯

A-5.

上一步的毀滅
是因為在Mac平台上有些限制
例如.background()
就必須明確指出是Color.gray,不能偷懶只寫.gray(但為什麼??)
總之,沒辦法無痛轉移,還是要改扣
然後雖然可跑了,但好像不能preview

A-6.

所以我們改試另一條路
舊的檔案不動
新增一個新的SwiftUIView
可以看到下方多了新的Target可以勾

A-7.

首頁換掉
如果有需要做平台判斷可以寫#if os(macOS)
Mac如果無法執行可以把Signing Certificate改成Sign to run loaclly
可以看到順利跑在雙平台了(紅配綠 真美麗)

B-0.

接著我們來試試看換icon
先到圖標工廠請它幫我們生各尺寸的icon

B-1.

成功拉到Asset裡的AppIcon

B-2.

但是竟然還是預設icon???

B-3.

原來是這邊有bug
可以看到左邊的Target已經顯示換上去的icon了
代表有吃到圖
然後我們選擇App icon的source是下面那個來源

B-4.

選完之後點開又彈回去= =

B-5.

可能是兩個source都叫AppIcon錯亂了吧
把另外一個改名字之後就正常了

B-6.

如果是開一個新專案
直接選Multiplatform的App
但要注意!!!
換完icon,simulator要重啟(害我試超久 北爛= =)

B-7.

新專案的話
AppIcon檔會共用
在右側欄有Devices可以勾
選擇的話對應的尺寸位置就會跑出來

恐怖插曲

當我在MultiplatformView加上一行

@State var isShowAlert = false

之後

跑在Mac上竟然會BAD_ACCESS

iOS可以(但第一次點會LAG一下)
也是搞了半天不知道錯在哪
嚇死我了
然後clean build(⇧⌘K)之後就好了........e04

推薦參考

https://developer.apple.com/tutorials/swiftui/creating-a-macos-app

https://www.raywenderlich.com/19611194-multiplatform-app-tutorial-swiftui-and-xcode-12

Tomorrow Preview

Yes


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson27 = "call RESTful API"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson29 = "環境變數"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言